<template>
  <div class="details-container">
    <ArticleDetailsCard :article="article" />
    <CommentCard :author-id="article.author.id"
                 :blog-id="article.id"
                 :comment-count="article.comment_count"
                 class="comment-card"
                 :id="route.params.id" />
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {notification} from "ant-design-vue";
import {apiGet} from "../../fentch";
import ArticleDetailsCard from "../../components/blog/details/ArticleDetailsCard.vue";
import CommentCard from "../../components/blog/details/comment/CommentCard.vue";

const route = useRoute()

const article = ref({
  id: 0,
  title: '',
  content: '',
  author_id: '',
  author: {
    name: '',
    email: ''
  },
  created_at: ''
})

onMounted(() => {
  const id = route.params.id;
  apiGet(`/blogs/${id}`).then(res => {
    if (res.data.code === 0) {
      article.value = res.data.data
      return
    }
    notification.error({
      description: '错误',
      message: res.data.message
    })
  })
})
</script>

<style scoped>
.details-container {
  display: flex;
  flex-direction: column;
}

.comment-card {
  margin-top: 20px;
  width: 1200px;
}
</style>